<template>
  <div class="TopHeader">
    <div class="container">
      <div class="one"></div>
      <div class="two">
        <common-header></common-header>
      </div>
      <div class="three">
        <section>
          <i class="iconfont icon-search"></i>&ensp;
          <input type="text" placeholder="搜一搜" />
        </section>
      </div>
      <div class="four">
        <router-link to="/cartview">
          <i class="iconfont icon-cart"></i>
          <p>{{ $store.getters['cart/numbershuobj'] }}</p>
        </router-link>
      </div>
      <div class="cartlist">
        <ul>
          <li v-for="(item, key) in listobj" :key="key">
            <div>
              <img :src="item.prcture" alt="">
            </div>
            <div>
              <p>{{ item.name }}</p>
              <p></p>
            </div>
            <div>
              <p>￥{{ item.nowPrice }}</p>
              <p>{{ item.count }}</p>
            </div>
          </li>
        </ul>

      </div>
    </div>
  </div>
</template>
<script>
import Appcartview from "../cartgou/appcartview.vue";
import CommonHeader from "./CommonHeader.vue";
export default {
  components: { CommonHeader, Appcartview },
  data() {
    return {
      listobj: this.$store.state.cart.list,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/color.scss";

.TopHeader {
  width: 100%;
  height: 132px;
  display: flex;
  background: #fff;
  position: relative;

  .cartlist {
    width: 400px;
    // height: 400px;
    background-color: #fff;
    position: absolute;
    top: 80px;
    right: 0;
    z-index: 9999;
    display: none;

    ul {

      // display: none;
      li {
        display: flex;

        img {
          width: 80px;
          height: 80px;
        }
      }
    }
  }

  .container {
    height: 132px;
    display: flex;

    .one {
      width: 200px;
      height: 100%;
      background-image: url("@/assets/img/logo.tu.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100%;
    }

    .two {
      width: 820px;
      height: 100%;
    }

    .three {
      width: 170px;
      height: 100%;
      display: flex;
      align-items: center;

      section {
        width: 100%;
        height: 32px;
        border-bottom: 1px solid #ccc;
        display: flex;
        align-items: center;

        input {
          width: 140px;
          height: 17px;
        }
      }
    }

    .four {
      width: 50px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      i {
        font-size: 26px;
      }

      p {
        position: absolute;
        width: 20px;
        height: 20px;
        font-size: 15px;
        text-align: center;
        line-height: 20px;
        background: red;
        text-align: center;
        top: 48px;
        left: 30px;
        border-radius: 50%;
      }

      // &:hover {
      //   display: block;
      // }
    }
  }
}
</style>
